<!-- 1. 加减号点击可以修改某本书要购买的数量，且总价格要发生变更
2. 移除按钮可以讲购物车列表中某一条数据移除，同样影响总价格 -->

<template>
    <table>
        <thead>
            <th>序号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr v-for="(item,i) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="subtract(i)">-</button>
                    <span class="counter">{{item.count}}</span>
                    <button @click="add(i)">+</button>
                </td>
                <td>
                    <button @click="clear(i)">移除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <h2>总价格: {{tatalPrice}}</h2>
</template>

<script setup>
import {reactive,computed} from 'vue'


const books = reactive([
    {
        id: 1,
        name: '《算法导论》',
        date: '2006-9',
        price: 85.00,
        count: 1
    },
    {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-2',
        price: 59.00,
        count: 1
    },
    {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.00,
        count: 1
    },
    {
        id: 4,
        name: '《代码大全》',
        date: '2006-3',
        price: 128.00,
        count: 1
    },
])

 const subtract=(i)=>{
    if(books[i].count>0) books[i].count--
}
 const add=(i)=>{
    books[i].count++
}
const tatalPrice = computed(()=>{
    let tatalPrice=0
    for(let i=0; i<books.length; i++){
        tatalPrice+=books[i].price*books[i].count
    }
    return tatalPrice  
})
const clear=(i)=>{
    books.splice(i, 1)
}
</script>

<style lang="css" scoped>
table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

th {
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}

.counter {
    margin: 0 5px;
}
</style>